
import React, { Component } from 'react';
import { Drawer, Button, NavBar, Selection } from 'iftide';
import { View, Text, StyleSheet, ScrollView,SafeAreaView } from 'react-native'
import { RootSiblingParent } from 'react-native-root-siblings'
import ActionSheet_Demo from './examples/src/library/actionsheet/ActionSheet_Demo';
import Badge_Demo from './examples/src/library/badge/Badge_Demo';
import Baseline_Demo from './examples/src/library/baseline/Baseline_Demo';
import BlockSelect_Demo from './examples/src/library/blockselect/BlockSelect_Demo';
import BottomButton_Demo from "./examples/src/library/bottombuttom/BottomButton_Demo";
import Button_Demo from './examples/src/library/button/Button_Demo';
import Calendar_Demo from './examples/src/library/calendar/Calendar_Demo';
import Card_Demo from './examples/src/library/card/Card_Demo';
import Cell_Demo from './examples/src/library/cell/Cell_Demo';
import CheckBox_Demo from './examples/src/library/checkbox/CheckBox_Demo';
import Collapse_Demo from './examples/src/library/collapse/Collapse_Demo';
import Counter_Demo from './examples/src/library/counter/Counter_Demo';
// import Currency_Demo from './examples/src/library/currency/Currency_Demo';
import Dialog_Demo from './examples/src/library/dialog/Dialog_Demo';
import ImageViewer_Demo from './examples/src/library/image/ImageViewer_Demo';
import Layer_Demo from './examples/src/library/layer/Layer_Demo';
import List_Demo from './examples/src/library/list/List_Demo';
import Marquee_Demo from './examples/src/library/marquee/Marquee_Demo';
import Menu_Demo from './examples/src/library/menu/Menu_Demo';
import Message_Demo from './examples/src/library/message/Message_Demo';
import MessageBox_Demo from './examples/src/library/messagebox/MessageBox_Demo';
import NavBar_Demo from './examples/src/library/navbar/NavBar_Demo';
import Number_Demo from './examples/src/library/number/Number_Demo';
import NumberBox_Demo from './examples/src/library/numberbox/NumberBox_Demo';
import Pagination_Demo from './examples/src/library/pagination/Pagination_Demo';
import Password_Demo from './examples/src/library/password/Password_Demo';
// import Picker_Demo from './examples/src/library/picker/Picker_Demo';
import Popover_Demo from './examples/src/library/popover/Popover_Demo';
import Progress_Demo from './examples/src/library/progress/Progress_Demo';
import Pullrefresh_Demo from './examples/src/library/pullrefresh/Pullrefresh_Demo';
import Radio_Demo from './examples/src/library/radio/Radio_Demo';
import Range_Demo from './examples/src/library/range/Range_Demo';
import Raty_Demo from './examples/src/library/raty/Raty_Demo';
import Row_Demo from './examples/src/library/row/Row_Demo';
import SearchBar_Demo from './examples/src/library/searchbar/SearchBar_Demo';
import Selection_Demo from './examples/src/library/selection/Selection_Demo';
import Simplecode_Demo from './examples/src/library/simplecode/Simplecode_Demo';
import Slider_Demo from './examples/src/library/slider/Slider_Demo';
import Spin_Demo from './examples/src/library/spin/Spin_Demo';
import Step_Demo from './examples/src/library/step/Step_Demo';
import Sudoku_Demo from './examples/src/library/sudoku/Sudoku_Demo';
import Switch_Demo from './examples/src/library/switch/Switch_Demo';
import Table_Demo from './examples/src/library/table/Table_Demo';
import Tabs_Demo from './examples/src/library/tabs/Tabs_Demo';
import Tag_Demo from './examples/src/library/tag/Tag_Demo';
import TextArea_Demo from './examples/src/library/textarea/TextArea_Demo';
import TextField_Demo from './examples/src/library/textfield/TextField_Demo';
import VerifyCode_Demo from './examples/src/library/verifycode/VerifyCode_Demo';
import NewsList_Demo from './examples/src/library/newsList/NewsList_Demo';
import BackToTop_Demo from './examples/src/library/backToTop/BackToTop_Demo';
import SliderButton_Demo from './examples/src/library/sliderButton/SliderButton_Demo';
import Hint_Demo from './examples/src/library/hint/Hint_Demo';
import CascadeDatePicker_Demo from './examples/src/library/CascadeDatePicker/CascadeDatePicker_Demo';
import ScaleSlider_Demo from './examples/src/library/ScaleSlider/ScaleSlider_Demo';
import StickList_Demo  from './examples/src/library/stickList/StickList_Demo.js';

export class IFTideExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: true,
            component: <ActionSheet_Demo />
        }
    }

    // componentDidMount() {
    //     console.log(window.location);
    //     if(window.location){
    //         let param = window.location.search;
    //         console.log(param);
    //         if (param) {
    //             // 获取href的参数,去除？然后列成对象
    //             // repalce
    //            let paramList = param.replace('?',"").split('&');
    //            let paramObj = {};
    //            paramList.map((item) => {
    //                let [key, value] = item.split('=');
    //                paramObj[key] = value;
    //            })
    //            if (paramObj.selectedStory) {
    //             this._goToUrl(this.rennderComponent(paramObj.selectedStory)) 
    //            }
    //         }
    //     }
       
        
        
    }

    // rennderComponent = (componentName) => {
    //     let component = null
    //     switch (componentName) {
    //         case "ActionSheet":
    //             component = <ActionSheet_Demo />;
    //             break;
    //         case "BackToTop":
    //             component = <BackToTop_Demo />;
    //             break;
    //         default: 
    //             break;
    //     }
    //     return component;
    // }

    onOpenChange = (isOpen) => {
        /* tslint:disable: no-console */
        console.log('是否打开了 Drawer', (isOpen).toString());
    }
    _goToUrl = (value) => {
        this.setState({ component: value })
    }

    render() {

        const sidebar = (
            <ScrollView style={styles.container}>
                <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 24, marginBottom: 15, marginTop: 20 }}>目录</Text>
                <View style={{ width: 260 }}>
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='ScaleSlider' onPress={() => { this._goToUrl(<ScaleSlider_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='ActionSheet' onPress={() => { this._goToUrl(<ActionSheet_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='BackToTop' onPress={() => { this._goToUrl(<BackToTop_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Badge' onPress={() => { this._goToUrl(<Badge_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Baseline' onPress={() => { this._goToUrl(<Baseline_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='BlockSelect' onPress={() => { this._goToUrl(<BlockSelect_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='BottomButton' onPress={() => { this._goToUrl(<BottomButton_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Button' onPress={() => { this._goToUrl(<Button_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Calendar' onPress={() => { this._goToUrl(<Calendar_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Card' onPress={() => { this._goToUrl(<Card_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Cell' onPress={() => { this._goToUrl(<Cell_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='CheckBox' onPress={() => { this._goToUrl(<CheckBox_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Collapse' onPress={() => { this._goToUrl(<Collapse_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Counter' onPress={() => { this._goToUrl(<Counter_Demo />) }} />
                    {/* <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Currency' onPress={() => { this._goToUrl(<Currency_Demo />) }} /> */}
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Dialog' onPress={() => { this._goToUrl(<Dialog_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Hint' onPress={() => { this._goToUrl(<Hint_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='ImageViewer' onPress={() => { this._goToUrl(<ImageViewer_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Layer' onPress={() => { this._goToUrl(<Layer_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='List' onPress={() => { this._goToUrl(<List_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Marquee' onPress={() => { this._goToUrl(<Marquee_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Menu' onPress={() => { this._goToUrl(<Menu_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Message' onPress={() => { this._goToUrl(<Message_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='MessageBox' onPress={() => { this._goToUrl(<MessageBox_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='NavBar' onPress={() => { this._goToUrl(<NavBar_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='NewsList' onPress={() => { this._goToUrl(<NewsList_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Number' onPress={() => { this._goToUrl(<Number_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='NumberBox' onPress={() => { this._goToUrl(<NumberBox_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Pagination' onPress={() => { this._goToUrl(<Pagination_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Password' onPress={() => { this._goToUrl(<Password_Demo />) }} />
                    {/* <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Picker' onPress={() => { this._goToUrl(<Picker_Demo />) }} /> */}
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Popover' onPress={() => { this._goToUrl(<Popover_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Progress' onPress={() => { this._goToUrl(<Progress_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Pullrefresh' onPress={() => { this._goToUrl(<Pullrefresh_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Radio' onPress={() => { this._goToUrl(<Radio_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Range' onPress={() => { this._goToUrl(<Range_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Raty' onPress={() => { this._goToUrl(<Raty_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Row' onPress={() => { this._goToUrl(<Row_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='SearchBar' onPress={() => { this._goToUrl(<SearchBar_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Selection' onPress={() => { this._goToUrl(<Selection_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Simplecode' onPress={() => { this._goToUrl(<Simplecode_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Slider' onPress={() => { this._goToUrl(<Slider_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='SliderButton' onPress={() => { this._goToUrl(<SliderButton_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Spin' onPress={() => { this._goToUrl(<Spin_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Step' onPress={() => { this._goToUrl(<Step_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Sudoku' onPress={() => { this._goToUrl(<Sudoku_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Switch' onPress={() => { this._goToUrl(<Switch_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Table' onPress={() => { this._goToUrl(<Table_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Tabs' onPress={() => { this._goToUrl(<Tabs_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='Tag' onPress={() => { this._goToUrl(<Tag_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='TextArea' onPress={() => { this._goToUrl(<TextArea_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='TextField' onPress={() => { this._goToUrl(<TextField_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='VerifyCode' onPress={() => { this._goToUrl(<VerifyCode_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='CascadeDatePicker' onPress={() => { this._goToUrl(<CascadeDatePicker_Demo />) }} />
                    <Selection titleStyle={{ fontSize: 12 }} value=' ' title='StickList' onPress={() => { this._goToUrl(<StickList_Demo />) }} />
                </View>
            </ScrollView>
        );

        let header = {
            leftButton: '返回',
            title: '抽屉',
            rightButton: '下一步',
            rightButtonFunc: this.rightButtonFunc,
            rightButtonType: 'more',
            type: 'header'
        }

        return (
            <SafeAreaView>
                <RootSiblingParent>
                <View style={{ height: '100%' }}>
                    <Drawer
                        sidebar={sidebar}
                        position="top"
                        open={true}
                        drawerRef={(el) => this.drawer = el}
                        onOpenChange={this.onOpenChange}
                        drawerBackgroundColor="#eee"
                    >
                        <Button title="点击打开目录" onPress={() => this.drawer && this.drawer.openDrawer()}></Button>
                        {this.state.component}
                    </Drawer>
                </View>
                </RootSiblingParent>
               
            </SafeAreaView>
           
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});